<template>
  <div>
    <el-dialog
      title="提交检定"
      :visible.sync="dialogVisible1"
      width="50%"
      appendToBody
    >
      <el-form labelWidth="150px">
        <el-form-item label="检定/校准人" class="is-required">
          <el-input v-model="checkData.verifiy_person"></el-input>
          <div class="el-form-item__error" v-if="!$v.checkData.verifiy_person.required">
            请输入检定/校准人
          </div>
        </el-form-item>
        <el-form-item label="实际检定/校准时间" class="is-required">
          <el-date-picker
            valueFormat="yyyy-MM-dd"
            v-model="checkData.realtime"
            type="date"
            style="width:100%"
            placeholder="选择日期"
          >
          </el-date-picker>
          <div class="el-form-item__error" v-if="!$v.checkData.realtime.required">
            请选择实际检定/校准时间
          </div>
        </el-form-item>
        <el-form-item label="溯源方式" class="is-required">
          <el-input v-model="checkData.traceability"></el-input>
          <el-select placeholder="筛选溯源方式" style="width:100%" @change="changesyfs">
            <el-option
              v-for="item in syfsArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_name"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.checkData.traceability.required">
            请输入溯源方式
          </div>
        </el-form-item>
        <el-form-item label="检定/校准单位" class="is-required">
          <el-input v-model="checkData.verifiy_company" clearable></el-input>
          <el-select placeholder="筛选检定/校准单位" style="width:100%" @change="changejddw">
            <el-option
              v-for="item in jddwArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_name"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.checkData.verifiy_company.required">
            请输入检定/校准单位
          </div>
        </el-form-item>
        <el-form-item label="检定/校准费用" class="is-required">
          <el-input v-model="checkData.verifiy_fee"></el-input>
          <div class="el-form-item__error" v-if="!$v.checkData.verifiy_fee.required">
            请输入检定/校准费用
          </div>
          <div class="el-form-item__error" v-if="!$v.checkData.verifiy_fee.money">
            检定/校准费用格式有误
          </div>
        </el-form-item>
        <el-form-item label="添加证书">
          <el-button size="mini" @click="addcert" type="primary" v-if="sumobj.length<1">添加</el-button> (只能上传一条证书记录，如需更改请先删除)
        </el-form-item>
        <el-form-item label="预览">
          <div v-for="(item, index) in sumobj" :key="index" style="border-top:1px solid #f1f1f1;display:flex;justify-content:space-between">
            <span>
              证书编号：{{item.certnum}}
            </span>
            修正因子:
            <span>
              <b v-html="item.factor">{{item.factor}}</b>
            </span>
            附件：
            <span v-for="item2 in item.filename" :key="item2">
              {{item2}}
            </span>
            <span>
              <i class="el-icon-delete" @click="deletesum(index)"></i>
            </span>

          </div>
        </el-form-item>

      </el-form>
      <el-dialog
        title="上传证书"
        :visible.sync="innerVisible44"
        appendToBody
      >
        <el-form labelWidth="100px">
          <el-form-item label="上传附件" style="display:block;width:100%">
            <upload2 :filelimit="1000" :filelink.sync="filearr2" :isedit="false" :ispic="false"
              v-if="isreloadpic"
            ></upload2>
          </el-form-item>
          <el-form-item label="修正因子" style="width:100%">
            <quill-editor ref="myTextEditor2"
              v-model="factor"
              class="editor"
              :options="editorOption"
            >
            </quill-editor>
          </el-form-item>
          <el-form-item label="证书编号" class="is-required" style="width:100%">
            <el-input style="width:100%" v-model="certnum"></el-input>
            <div class="el-form-item__error" v-if="certnum==''">
              请输入证书编号
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="innerVisible44 = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="saveuploadfile">确 定</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible1 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="dosubmitcheck">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import upload2 from '~/components/common/upload2.vue';
import { required } from 'vuelidate/lib/validators';
import { regex } from 'vuelidate/lib/validators/common.js';

const money = regex('money', /^\d{1,8}(\.\d{1,2})?$/);
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  // [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ direction: 'rtl' }],
  // [{ size: ['small', false, 'large', 'huge'] }],
  // [{ header: [1, 2, 3, 4, 5, 6, false] }],
  // [{ font: [] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ['clean'],
];
export default {
  validations: {
    checkData: {
      verifiy_person: {
        required,
      },
      realtime: {
        required,
      },
      traceability: {
        required,
      },
      verifiy_fee: {
        required,
        money,
      },
      verifiy_company: {
        required,
      },
    },
  },
  data() {
    return {
      ts: this.newStore(),
      dialogVisible1: true,
      innerVisible44: false,
      isreloadpic: true,
      xzyz: '',
      checkData: {
        verifiy_company: '',
        traceability: '',
      },
      filearr2: [],
      certnum: '',
      filename: [],
      fileurl: [],
      sumobj: [],
      factor: '',
      itemdata: {},
      jddwArr: [],
      syfsArr: [],
      editorOption: {
        placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,
          },
        },
      },
    };
  },
  components: {
    upload2,
  },
  created() {
    this.getcodeData('0405', '04', 'jddwArr');
    this.getcodeData('0406', '04', 'syfsArr');
    this.itemdata = Object.assign({}, this.item1);
    this.checkData.verifiy_company = this.itemdata.hash.verifiy_company;
    this.checkData.traceability = this.itemdata.hash.traceability;
  },
  props: {
    item1: {
      type: Object,
      required: true,
    },
  },
  methods: {
    // 公共方法获取代码项
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
      });
    },
    changesyfs(val) {
      this.checkData.traceability = val;
    },
    changejddw(val) {
      this.checkData.verifiy_company = val;
    },
    dosubmitcheck() {
      console.log(this.sumobj, '21321');

      if (this.sumobj.length == 0) {
        this.$message({
          type: 'error',
          message: '至少添加一个证书',
        });
        return;
      }
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else {
        const req = {
          handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A2A135017DDC2CA8099635F7A8551A9E464EDEA66339D7026',
          id: this.item1.hash.id,
          verifiy_fee: this.checkData.verifiy_fee,
          verifiy_person: this.checkData.verifiy_person,
          verifiy_company: this.checkData.verifiy_company,
          traceability: this.checkData.traceability,
          realtime: this.checkData.realtime,
        };

        this.spost(this.ts, '/mainservlet', req).then(() => {
          for (let i = 0; i < this.sumobj.length; i += 1) {
            const req2 = {
              handle: 'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A21E0422975959501295222A86EE27D7B',
              id: this.item1.hash.id,
              certnum: this.sumobj[i].certnum,
              factor: this.sumobj[i].factor,
              filename: this.sumobj[i].filename,
              fileurl: this.sumobj[i].fileurl,

            };
            this.spost(this.ts, '/mainservlet', req2).then(() => {

            });
          }
          this.$message({
            type: 'success',
            message: '提交成功',
          });
          this.$parent.handleCurrentChange();
          this.dialogVisible1 = false;
        });
      }
    },
    deletesum(index) {
      this.sumobj.splice(index, 1);
    },
    addcert() {
      this.certnum = '';
      this.factor = '';
      this.reload();
      this.filearr2 = [];
      this.innerVisible44 = true;
    },
    saveuploadfile() {
      if (this.certnum == '') {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
        return;
      }
      const a = {};
      a.certnum = this.certnum;
      a.factor = this.factor;
      a.filename = this.postname(this.filearr2);
      a.fileurl = this.posturl(this.filearr2);
      console.log(a);
      this.sumobj.push(a);
      this.innerVisible44 = false;
    },
    reload() {
      this.isreloadpic = false;
      this.$nextTick(() => {
        this.isreloadpic = true;
      });
    },
    // 公共方法图片数组转路径数组
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
  },
};
</script>

<style scoped>
.statusspan{
  display: inline-block;
  width: 30px;
  height: 30px;

}
.quill-editor{
  height: auto;
}
</style>
